<template>
  <a-modal title="详情" :visible="visible" width="100%" :footer="null" @cancel="visible = false" style="margin-top:-20px;
 " @ok="handleOk" wrapClassName="full-modal">
    <div style=";">
      <div class="nav">
        <div class="nav-top">
          <div>分享下这次消防检查专项活动的经验教训?</div>
          <div>15回复, 共一页</div>
        </div>
        <div class='nav-center'>2023 08-06 10:30:46</div>
        <div class='nav-footer'>
          <div>
            <img src="@/assets/img/theme/403.png" alt="">
            <span>民警</span>
          </div>
          <div>
            收藏
          </div>
        </div>
      </div>
      <!-- 评论 -->
      <div class="gunD">
        <div class="pinLun" v-for="(item, index) in tableData" :key="index">
          <div class="pinLun-top">
            <div>
              <div>
                <img src="@/assets/img/theme/403.png" alt="">
                <span>{{ item.createByAccount }}</span>
              </div>
              <div>{{ item.content }}</div>
            </div>
            <div>{{ item.createDate }}</div>
          </div>
          <div class="pinLun-footer">
            <span>转发</span>
            <span class="footer-span">收藏</span>
            <span>回复</span>
          </div>
        </div>
      </div>

    </div>

    <s-scroll>
      <s-form ref="form" :value="formValue">
        <s-form-item label="" name="content" :colon="true" :display-title="true">
          <s-text-area :allow-clear="true" placeholder="请输入发帖内容" v-model="formValue.content"
            style="width: 800px;height: 100px;" />
        </s-form-item>
      </s-form>
      <div style="text-align: center;">
        <a-button type="primary" ghost @click="save">回复</a-button>
      </div>
    </s-scroll>
  </a-modal>
</template>
<script>

import { dateTypeFormat } from '@/utils/dateFormat'
export default {
  name: 'Detail',
  data() {
    return {

      formValue: {},
      inputValue: '',
      tableData: [],
      visible: false,
      exchangeIdObject: {},
    }
  },
  mounted() {
  },
  methods: {
    save() {
      const form = this.$refs.form
      form.validate((values, fullValue) => {
        this.confirmLoading = true
        values.exchangeId = this.exchangeIdObject.exchangeId
        this.$api.PUT('/modules/exchangeInfo/insert', values).then(res => {
          if (res.code === '000000') {
            this.formValue = {};
            this.open(this.exchangeIdObject.exchangeId);
          } else {
            console.log('回复失败');
          }
        }).catch(() => {
          this.confirmLoading = false
        })
      })
    },
    open(id) {
      const param = {
        exchangeId: id
      }
      this.exchangeIdObject = param
      this.$loading(true)
      this.$api.GET('/modules/exchangeInfo/pageList', param).then((res) => {
        if (!res.data) {
          this.$loading(false)
          this.visible = false
          this.$message.warn('数据不存在')
        } else {

          res.data.forEach(item => {
            item.createDate = dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date(item.createDate));
          });
          this.tableData = res.data
          this.$loading(false)
          this.visible = true
        }
      }).catch(() => {
        this.$loading(false)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.nav {
  background: lightcoral;

  .nav-top {
    display: flex;
    justify-content: space-between;
  }

  .nav-center {
    padding: 10px 0;
  }

  .nav-footer {}

  .nav-footer {
    display: flex;
    justify-content: space-between;
  }
}

.gunD {
  overflow: auto;
  height: 600px;
}

::-webkit-scrollbar {
  width: 0;
  height: 10px;
}

.pinLun {
  margin: 10px 0;
  border-bottom: 1px solid lightblue;
  padding: 10px 20px;



  .pinLun-top {
    display: flex;
    justify-content: space-between;
  }
}

.pinLun-footer {
  display: flex;
  justify-content: flex-end
}

.footer-span {
  padding: 0 10px;
}

img {
  width: 50px;
  height: 50px;
}

.huiFu {
  display: flex;
  // justify-content: space-around;
  // margin-right:30px
}

.huiFu-name {
  margin-right: 20px;
}

.huiFu-operate {
  display: flex;
  justify-content: space-between;
}

.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }

  .ant-modal-body {
    flex: 1;
  }
}
</style>